<%--
  Created by IntelliJ IDEA.
  User: hanfei
  Date: 18/6/27
  Time: 下午3:45
  To change this template use File | Settings | File Templates.
--%>
<%@ page import="com.wuming.caiwu.security.SecurityHander" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${allServerPath}static/css/bootstrap.min.css">
    <link rel="stylesheet" href="${allServerPath}static/layui/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${allServerPath}static/layui/css/style.css">
    <link rel="stylesheet" href="${allServerPath}static/layui/css/public.css">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->

    <style>
        .tab_zp td span {
            font-weight: bold;
            color: #003399;
        }

        ::-moz-placeholder {
            color: #d4d4d4;
        }

        ::-webkit-input-placeholder {
            color: #d4d4d4;
        }

        :-ms-input-placeholder {
            color: #d4d4d4;
        }

        .pic-content{
            position: relative;
        }

        .pic-content button{
            position: absolute;
            top: 30px;
            left: 30px;
            width: 120px;
            height: 120px;
            background-color: transparent;
        }

    </style>
</head>
<body>
<div style="padding: 15px;">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>商品分类基本信息</legend>
    </fieldset>

    <form class="layui-form" action="" id="categoryForm">
        <div class="layui-row">
            <div class="layui-col-md12">
                <div class="layui-form-item">
                    <label class="layui-form-label">商品分类名</label>

                    <div class="form-group layui-input-block" style="width: 450px;">
                        <input type="text" name="name" placeholder="" autocomplete="off"
                               class="layui-input" style="width: 50%;display: inline-block"
                               value="${category['name']}">
                    </div>
                </div>

                <div class="layui-row">
                    <div class="layui-col-xs12">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">商品分类图片</label>
                                <div class="layui-upload layui-input-inline">
                                    <div class="layui-upload-list pic-content">
                                        <button type="button" class="layui-btn" id="icon"></button>
                                        <c:if test="${category['icon'] != null}">
                                            <img class="layui-upload-img" src="${category['icon']}"
                                                 id="iconImg">
                                        </c:if>
                                        <c:if test="${category['icon'] == null}">
                                            <img class="layui-upload-img" src="${allServerPath}/static/images/insure/more.png"
                                                 id="iconImg">
                                        </c:if>
                                        <input type="hidden" name="icon" value="${category['icon']}"/>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">父分类ID</label>

                    <div class="form-group layui-input-block" style="width: 450px;">
                        <input type="text" name="parentId" placeholder="" autocomplete="off"
                               class="layui-input" style="width: 50%;display: inline-block"
                               value="${category['parentId']}">
                    </div>
                </div>
                <div class="layui-form-item">
                        <label class="layui-form-label">状态</label>
                        <div class="form-group layui-input-inline">
                            <select id="showStatus" name="showStatus" lay-filter="showStatus">
                                <option value=""></option>
                                <option value="0">禁用</option>
                                <option value="1">启用</option>
                            </select>
                        </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">排序</label>

                    <div class="form-group layui-input-inline">
                        <input type="text" name="sort" value="${category['sort']}" id="sort"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
        </div>
        <input type="hidden" name="storeId" value="<%=SecurityHander.getCurrentUserId()%>">
        <input type="hidden" name="id" value="${category['id']}"/>
    </form>
    <div class="layui-row">
        <div class="layui-col-md12">
            <div class="layui-form-item">
                <button class="layui-btn" type="button" name="btnSave" id="btnSave" lay-filter="category">保存商品分类信息
                </button>
            </div>
        </div>
    </div>

</div>

<script src="${allServerPath}static/layui/layui/layui.js" charset="utf-8"></script>
<script src="${allServerPath}static/js/jquery-2.1.4.min.js" charset="utf-8"></script>
<script src="${allServerPath}static/js/bootstrap.min.js" charset="utf-8"></script>
<script type="text/javascript" src="${allServerPath}static/js/bootstrapValidator.js"></script>
<script type="text/javascript" src="${allServerPath}static/js/common/date-util.js"></script>

<script>
    layui.use(['layer', 'form', 'laydate', 'jquery', 'upload'], function () {
        var form = layui.form
            , layer = layui.layer
            , $ = layui.jquery
            , upload = layui.upload;

        upload.render({
            elem: '#icon'  /*根据绑定id，打开本地图片*/
            , url: '${allServerPath}web/base/uploadSingleImg.htmls' /*上传后台接受接口*/
            , auto: true  /*true为选中图片直接提交，false为不提交根据bindAction属性上的id提交*/
            , data: {
            }
            , done: function (res) {
                //如果上传失败
                if (res.success) {
                    $('#iconImg').attr('src', res.data); //图片链接（base64）
                    $("input[name='icon']").val(res.data);
                }
            }
            , error: function () {
                //演示失败状态，并实现重传
                layer.msg("上传失败.");
            }
        });


        var showStatus = '${category.showStatus}';
        if ('' == showStatus) {
            $("#showStatus").find("option[value='1']").attr("selected", true);
        } else {
            $("#showStatus").val(showStatus);
        }

        form.render();


        $("button[name='btnSave']").click(function () {
            $("#categoryForm").data("bootstrapValidator").resetForm();
            $("#categoryForm").bootstrapValidator('validate');
            if ($("#categoryForm").data('bootstrapValidator').isValid()) {
                $.ajax({
                    type: 'post',
                    url: '${allServerPath}web/productcategory/save.htmls',
                    data: $("#categoryForm").serialize(),
                    dataType: 'JSON',
                    success: function (data) {
                        if (data.success) {
                            layer.msg("保存成功.");
                            // var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                            // parent.layer.close(index); //再执行关闭
                        } else {
                            layer.msg(data.message);
                        }
                    },
                    error: function () {
                        layer.msg("保存失败.");
                    }
                });
            }
        });

        $('#categoryForm')
            .bootstrapValidator({
                live: 'disabled',//验证时机
                message: 'This value is not valid',
                submitButtons: '#btnSave',//指定提交按钮
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    name: {
                        validators: {
                            notEmpty: {
                                message: '不能为空'
                            }
                        }
                    }
                }
            });
    });
</script>
</body>
</html>
